<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div style="width:100%">
                <div style="width:100%;float:left">
                    <table style="font-size:14px;width:100%;border-spacing:0px;white-space: nowrap;" border="0" class="mytableclass">
                        <tr>
                            <td width="80px" align="right" style="font-weight:bold;font-size:17px">条码号：</td>
                            <td align="left">
                                <input value="" clearable :placeholder="barcodeholder" class="el-input__inner" autocomplete="off" @keydown.enter="scanBarcode($event)" style="width:465px;height:36px" ref="barcode" id="barcodediv" @focus="HightlightPos()" />
                            </td>
                            <td align="right">
                                <div class="top-deal">
                                    <el-button icon="el-icon-printer" @click="btnLabelPrint()">标签打印</el-button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <div class="pagecenter">
            <rm-layout-right splitcolor="#F8F8FF" movingcolor="#e7e7ee" :splitwidth="5" :fixsize="450" :minfixsize="300">
                <template v-slot:fix>
                    <div style="height:100%;width:100%;background-color:#ddccbb;">
                        <vxe-table show-overflow border ref="xTable2" height="auto" row-id="id" size="mini" :select-config="{ reserve: true }" :data.sync="detail" show-header-overflow highlight-current-row highlight-hover-row resizable stripe>
                            <vxe-table-column field="seq" title="序号 " width="50" header-align="center"></vxe-table-column>
                            <vxe-table-column field="req_itemname" title="申请项目名称 " width="166" header-align="center"></vxe-table-column>
                            <vxe-table-column field="item_price" title="实际价格 " width="88" header-align="center"></vxe-table-column>
                            <vxe-table-column field="qty" title="数量 " width="57" header-align="center"></vxe-table-column>
                            <vxe-table-column field="amount" title="金额 " width="57" header-align="center"></vxe-table-column>
                            <vxe-table-column field="req_itemcode" title="申请项目代码 " width="119" header-align="center"></vxe-table-column>
                            <vxe-table-column field="his_itemcode" title="HIS原始项目代码 " width="131" header-align="center"></vxe-table-column>
                            <vxe-table-column field="his_recordid" title="HIS中对应记录号 " width="129" header-align="center"></vxe-table-column>
                            <vxe-table-column field="req_groupid" title="分单类别ID " width="97" header-align="center"></vxe-table-column>
                            <vxe-table-column field="charge_flag" title="计价标志 " width="82" header-align="center"></vxe-table-column>
                            <vxe-table-column field="his_refcol1" title="HIS表相关字段1 " width="137" header-align="center"></vxe-table-column>
                            <vxe-table-column field="his_refcol2" title="HIS表相关字段2 " width="137" header-align="center"></vxe-table-column>
                            <vxe-table-column field="his_refcol3" title="HIS表相关字段3 " width="137" header-align="center"></vxe-table-column>
                        </vxe-table>
                    </div>
                </template>
                <div ref="xTableDiv" style="height:100%">
                    <vxe-table show-overflow ref="xTable1" height="auto" row-id="id" :select-config="{ reserve: true }" :data.sync="MasterDataDisplay" border size="mini" show-header-overflow highlight-current-row highlight-hover-row resizable stripe :cell-class-name="cellClassName" @current-change="detailretrieve" :edit-config="{ showIcon: false }" :sort-config="{ trigger: 'cell' }">
                        <vxe-table-column type="index" title="NO." width="40" header-align="center" align="center"></vxe-table-column>
                        <vxe-table-column field="req_groupna" title="分单类别" width="86" header-align="center" sortable>
                            <template v-slot="{ row }">
                                <div v-bind:style="{
										background: $pub.ColorChange(row.tube_color),
										color: $pub.colorConvert(row.tube_color),
									}" style="margin:0 -10px;text-align:center;">
                                    {{ row.req_groupna }}
                                </div>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="specimen_name" title="标本类型 " width="64" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_deptname" title="申请科室" width="100" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_wardname" title="病人病区 " width="100" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_bedno" title="床号 " width="60" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_name" title="姓名 " width="50" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_sexname" title="性别 " width="40" header-align="center" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_statname" title="申请状态 " width="70" header-align="center" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="barcode" title="条码号 " width="87" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="emer_flag" title="加急 " width="40" header-align="center" align="center" sortable>
                            <template v-slot="{ row }">
                                <div style="color:red">{{ row.emer_flag == '0' ? '' : '急' }}</div>
                            </template>
                        </vxe-table-column>
                        <vxe-table-column field="sample_items" title="项目描述 " width="143" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="reject_reason" title="退回原因 " width="155" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="base_amount" title="基准总金额 " width="75" header-align="center" align="right" sortable></vxe-table-column>
                        <vxe-table-column field="pat_no" title="病人号 " width="105" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_docname" title="申请医生 " width="70" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_typename" title="病人类型 " width="70" header-align="center" align="center" sortable></vxe-table-column>
                        <vxe-table-column field="sampled_dt" title="采样时间 " width="120" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="sampled_username" title="采样用户 " width="63" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="req_dt" title="申请日期 " width="120" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="pat_agestr" title="年龄 " width="60" header-align="center" sortable></vxe-table-column>
                        <vxe-table-column field="hospcodename" title="送检医院 " width="133" header-align="center" sortable></vxe-table-column>
                    </vxe-table>
                </div>
            </rm-layout-right>
        </div>
    </div>
</template>

<script type="text/javascript">
import input from "../../../../element-ui/packages/input/src/input.vue";
export default {
    name: "LIS230",
    data() {
        return {
            //条码框placeholder内容
            barcodeholder: "请扫描条码号",
            //条码号
            txtbarcode: "",
            MasterDataDisplay: [],
            detail: [],
            Options: {}
        };
    },
    computed: {},
    created() {
        this.getoption();
    },
    mounted() {
        this.$refs.barcode.focus();
    },
    methods: {
        getoption() {
            //从服务器获取配置
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS230",
                    method: "post",
                    data: {
                        action: "getoptions"
                    }
                })
                .then(res => {
                    this.Options = res;
                })
                .catch(e => {
                    console.log("error", e);
                });
        },
        //扫描条码
        scanBarcode(e) {
            let that = this;
            that.barcodeholder = "";
            var barcode = e.target.value;
            that.txtbarcode = barcode;
            e.target.value = "";
            if (that.MasterDataDisplay.findIndex(e => e.barcode == barcode) >= 0) {
                that.$pub.printbarcode(that, barcode, "1", that.Options.barstyle, "", "1");
            } else {
                that.$tool
                    .request({
                        url: "LIS/LIS2/LIS230",
                        method: "post",
                        data: {
                            action: "scanbarcode",
                            barcode: barcode
                        }
                    })
                    .then(res => {
                        if (res.flag <= 0) {
                            let msg = "未找到申请单信息";
                            if (res.msg) msg = res.msg;
                            that.barcodeholder = msg;
                            that.$alert(msg);
                        } else {
                            if (res.master && res.master.barcode) {
                                barcode = res.master.barcode;
                                if (that.MasterDataDisplay.findIndex(e => e.barcode == barcode) < 0) {
                                    that.MasterDataDisplay.push(res.master);
                                }
                                that.getdetails(barcode);
                                that.$pub.printbarcode(that, barcode, "1", that.Options.barstyle, "", "1");
                            }
                        }
                    })
                    .catch(e => {
                        console.log("error", e);
                    });
            }
            
            that.focusBarcode();
        },
        getdetails(barcode) {
            this.$tool
                .request({
                    url: "LIS/LIS2/LIS230",
                    method: "post",
                    data: {
                        action: "getdetails",
                        barcode: barcode
                    }
                })
                .then(res => {
                    this.detail = res.details.filter(item => !item.parent_itemcode || item.parent_itemcode == "" || item.parent_itemcode == item.req_itemcode);
                })
                .catch(e => {
                    console.log("error", e);
                });
            this.focusBarcode();
        },
        detailretrieve({ row }) {
            var barcode = row.barcode;
            if (barcode) this.getdetails(barcode);
        },
        btnLabelPrint() {
            let row = this.$refs.xTable1.getCurrentRow();
            if (!row) {
                this.$alert("请选中需要补打的条码！", "提示");
                return false;
            }
            this.$pub.printbarcode(this, row.barcode, "1", this.Options.barstyle, "", "1");
        },
        cellClassName({ column, row, columnIndex }) {
            if (column.property == "req_statname") {
                return this.$pub.getreqstatclass(row.req_stat);
            }
        },
        //选中条码框
        HightlightPos(myField) {
            if (!myField) myField = document.getElementById("barcodediv");
            myField.selectionStart = 0;
            myField.selectionEnd = myField.value.length;
        },
        focusBarcode(myField) {
            if (!myField) myField = document.getElementById("barcodediv");
            myField.focus();
        }
    }
};
</script>

<style scoped>
.pagetop {
    width: 100%;
    left: 0;
    right: 0;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    border: solid 1px #ccc;
    position: absolute;
    z-index: 99;
    height: 50px;
    overflow-x: auto;
    overflow-x: overlay;
}

.pagecenter {
    position: absolute;
    top: 55px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 455px;
    overflow: auto;
}

.middle-right {
    position: absolute;
    height: 100%;
    width: 450px;
    right: 0px;
}
.table1style tr td {
    padding: 1px 1px 1px 5px;
}
::-webkit-scrollbar {
    width: 0px;
    height: 5px;
    border: 4px solid white;
}
::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
}
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
/* Buttons */
::-webkit-scrollbar-button:single-button {
    background-color: #bbbbbb;
    display: block;
    border-style: solid;
    height: 5px;
    width: 5px;
}
/* Left */
::-webkit-scrollbar-button:horizontal:decrement {
    margin-right: 2px;
    border-width: 4px 4px 4px 0;
    border-color: #f1f1f1 transparent #f1f1f1 #f1f1f1;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:decrement:hover {
    border-color: #d2d2d2 transparent #d2d2d2 #d2d2d2;
}
/* Right */
::-webkit-scrollbar-button:horizontal:increment {
    margin-left: 2px;
    border-width: 4px 0 4px 4px;
    border-color: #f1f1f1 #f1f1f1 #f1f1f1 transparent;
    background-color: #000000;
}
::-webkit-scrollbar-button:horizontal:increment:hover {
    border-color: #d2d2d2 #d2d2d2 #d2d2d2 transparent;
}
/* .table1style .el-input--medium {
    font-size: 18px;
    font-weight: 700;
} */
::v-deep .popdialogstyle tr td div .el-input__inner {
    border: 1px solid rgba(255, 254, 254, 0) !important;
    background-color: rgba(255, 254, 254, 0) !important;
}
::v-deep .el-message-box {
    width: 670px;
}
.mytableclass table tr td {
    padding: 3px;
}
.top-deal {
    right: 5px;
    position: absolute;
    top: 16px;
    display: flex;
    align-items: center;
}
::v-deep .processingcls td {
    color: #1087ba;
}
::v-deep .errocls td {
    color: red;
}
::v-deep .erroalreadyread td {
    color: #0a5fb4;
}
.el-switch,
.el-checkbox {
    float: right;
}
.el-checkbox .el-checkbox__label {
    font-size: 14px !important;
}
#barcodediv::-webkit-input-placeholder {
    color: #0000ff;
}
</style>
